<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" size="small" @keyup.enter.native="getDataList()"
             @submit.native.prevent
    >
      <el-form-item label="支付方式名称" prop="payMethodName">
        <el-input v-model="queryParams.payMethodName" placeholder="支付方式名称" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()" v-has-permi="['payment:payMethod:query']">查询</el-button>
        <el-button type="primary"
                   @click="addOrUpdateHandle()"
                   v-has-permi="['payment:payMethod:add']"
        >新增
        </el-button>
        <el-button type="danger" @click="deleteHandle()"
                   :disabled="dataListSelections.length <= 0"
                   v-has-permi="['payment:payMethod:remove']"
        >批量删除
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
              style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" width="50"/>
      <el-table-column prop="payMethodName" header-align="center" label="支付方式名称">
        <template v-slot="{ row, column, $index }">
          {{ row.payMethodName }}
          <el-tooltip class="item" effect="dark" :content="questions[row.payMethodType]" placement="top"
                      v-if="row.payMethodType != 0"
          >
            <span><i class="el-icon-question"/></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="status" header-align="center" label="状态">
        <template v-slot="{ row, column, $index }">
          <el-tag type="success" v-show="row.status === 1">正常</el-tag>
          <el-tag type="danger" v-show="row.status === 2">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sysBuiltIn" header-align="center" label="系统内置">
        <template v-slot="{ row, column, $index }">
          <el-tag type="success" v-show="row.sysBuiltIn === 1">是</el-tag>
          <el-tag type="danger" v-show="row.sysBuiltIn === 2">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sortNum" header-align="center" label="排序"/>
      <el-table-column prop="remark" header-align="center" label="备注"/>
      <el-table-column fixed="right" header-align="center" width="150" label="操作">
        <template v-slot="{ row, column, $index }">
          <el-button type="text" size="small" @click="addOrUpdateHandle(row.payMethodId)"
                     v-has-permi="['payment:payMethod:edit']"
          >修改
          </el-button>
          <el-button v-if="row['payMethodType'] === 1" type="text" size="small"
                     @click="scanPaySettingMethod"
                     v-has-permi="['payment:payMethod:setting']"
          >支付设置
          </el-button>
          <el-button v-if="row.sysBuiltIn === 2" type="text" size="small"
                     @click="deleteHandle(row.payMethodId)"
                     v-has-permi="['payment:payMethod:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalPage > 0"
      :total="totalPage"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDataList()"
    />
    <!-- 弹窗, 新增 / 修改 -->
    <pay-method-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"
                              @close="addOrUpdateVisible = false"
    />
    <pay-method-scan-pay-setting v-if="scanPaySettingVisible" ref="scanPaySettingRef"
                                 @closed="scanPaySettingVisible = false"
    />
  </div>
</template>

<script>
import PayMethodAddOrUpdate
  from '@/views/operation/restaurant-management/payment/pay-method/components/PayMethodAddOrUpdate.vue'
import PayMethodScanPaySetting
  from '@/views/operation/restaurant-management/payment/pay-method/components/payMethodScanPaySetting.vue'
import { deletePayMethod, pagePayMethod } from '@/api/payment/payMethod'

export default {
  data() {
    return {
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        payMethodName: undefined
      },
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      scanPaySettingVisible: false,
      questions: {
        1: '商家扫描顾客付款码时使用。',
        2: '顾客使用会员卡（仅限本平台创建）买单时使用，使用时将自动扣减对应金额。',
        3: '用于顾客签单时使用的结账方式，需先去【挂账管理】中添加挂账人/挂账企业才可使用挂账消费'
      }
    }
  },
  components: {
    PayMethodAddOrUpdate,
    PayMethodScanPaySetting
  },
  created() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      pagePayMethod(this.queryParams).then(response => {
        this.dataList = response.rows
        this.totalPage = response.total
      }).finally(() => this.dataListLoading = false)
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    /**
     * 扫码支付设置
     */
    scanPaySettingMethod() {
      this.scanPaySettingVisible = true
      this.$nextTick(() => {
        this.$refs.scanPaySettingRef.init()
      })
    },
    // 删除
    deleteHandle(id) {
      let ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.payMethodId
        })
      this.$modal.confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`).then(() => {
        deletePayMethod(ids).then(response => {
          this.$modal.msgSuccess(response.msg)
        }).finally(() => {
          this.getDataList()
        })
      })
    }
  }
}
</script>
